<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="test01()">这是一个按钮</button><br>
        <!-- 简写形式 -->
        <button @click="test02()">这是一个按钮</button>

        {{name}}
        <br>
        {{ test03() }}
    </div>

    <!-- 1. 引入vue.js文件 -->
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    name: "张三"
                }
            },
            // methods配置项用于指定vue中的函数
            methods: {
                test01(){
                    // vue的方法中，可以通过this引用vue对象的实例
                    this.name = "李四";
                    console.log("test01");
                },
                test02(){
                    // 调用test01()，得通过vue对象调用
                    this.test01();
                },
                test03(){
                    console.log("test03....");
                    return "test03";
                }
            }
        });
    </script>
</body>
</html>